<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address-data">
			<view class="add-address-box" v-if="!addressId" @click="onSkip('address')">
				<text class="select-notice">请选择收货地址</text>
				<text class="cuIcon-right"></text>
			</view>
			<view class="address-list" @click="onSkip('address')" v-else>
				<view class="list">
					<text>{{address.area_text}}</text>
					<text class="tag">{{address.tag}}</text>
					<text class="tag" v-if="address.is_default == 1">默认</text>
				</view>
				<view class="list">
					<text class="address">{{address.address}}</text>
				</view>
				<view class="list">
					<text>{{address.consignee}}</text>
					<text>{{address.phone}}</text>
				</view>
				<view class="list">
					<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
				</view>
			</view>
			<view class="bar"></view>
		</view>
		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in confirmcartList" :key="index">
					<view class="thumb">
						<image :src="item.img[0]" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{item.name}}</text>
							<text class="attr">颜色：{{item.add1[0]}}{{item.add1[1]}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
								<text class="min">.00</text>
							</view>
							<view class="number">
								<text>x {{item.num}}</text>
							</view>
						</view>
						<!-- <view class="tag">
							<text>支持七天无理由退货</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">配送</view>
					<view class="content">
						<text>快递运输</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">运费险</view>
					<view class="content">
						<text>￥10.00</text>
						<text class="iconfont icon-check"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" v-model="remark" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discounts-data">
			<view class="discounts">
				<div class="list" @click="$refs['InvoiceInfo'].show()">
					<view class="title">发票</view>
					<view class="content">
						<text>不开发票</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list" @click="$refs['UseCoupon'].show()">
					<view class="title">优惠券</view>
					<view class="content">
						<text>无可用</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div>
				<div class="list">
					<view class="title">积分</view>
					<view class="content">
						<text>共300，满1000可用</text>
						<!-- <text class="iconfont icon-more"></text> -->
					</view>
				</div>
			</view>
		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{totalCount.totalPrice}}.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>会员折扣</text>
					</view>
					<view class="price">
						<text>-￥19.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址提示 -->
		<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
			<text>{{address.area_text}}{{address.address}}</text>
		</view>
		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text class="min">￥</text>
				<text class="max">{{totalCount.totalPrice}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>
		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon ref="UseCoupon"></use-coupon>
	</view>
</template>

<script>
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
		},
		data() {
			return {
				address: { //收货地址
					is_default: 0
				},
				addressId: 0,//是否默认地址
				confirmcartList: [], //订单数据
				remark: '',//留言
				scrollTop: 0,
			};
		},
		onLoad(option) {
			this.getDefaultAddress()
			this.confirmcartList = JSON.parse(option.confirmcartList)
			console.log(this.confirmcartList)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		watch: {
			address(val, oldVal) {
				if (this.address) {
					this.addressId = this.address.id;
				}
			}
		},
		methods: {
			//请求默认收货地址
			getDefaultAddress() {
				this.$api.order.getDefault().then((res) => {
					let data = res.data[0]
					data.area_text = data.area_text.replace(/-/g, '');
					data.area_id = JSON.parse(data.area_id)
					this.address = data
					// console.log(this.address)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/**
			 * 提交订单
			 */
			onSubmit() {
				let product = this.confirmcartList.map(item=>{
					return [
						item.num,
						item.price,
						item.goodsId
					]
				})
				let obj = {
					status:10,
					product:product,
					addressId:this.address.id,
					remark:this.remark,
					totalPrice:this.totalCount.totalPrice
				}
				this.$api.order.subOrder({
					data:JSON.stringify(obj)
				}).then((res) => {
					console.log(res)
					let id = res.data.message;
					uni.redirectTo({
						url: '/pages/CashierDesk/CashierDesk?id=' + id
					})
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/pages/AddressList/AddressList',
						})
						break;
				}
			}
		},
		computed: {
			// 购物车数量和总价
			totalCount(){
				// let totalNum = 0;
				let totalPrice = 0;
				this.confirmcartList.filter(item => {
					// totalNum += 1;
					totalPrice += item.num * item.price;
				})
				return {
					// totalNum,
					totalPrice
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
</style>
